<template>
  <div class="wrapper">
    <scroller class="scroller">
      <div>
      <ul class="user_top">
        <li class="user_top_li user_top_left">
          <image class="user_top_img" src="../src/assets/img/1.jpg" ></image>
        </li>
        <li class="user_top_li">
          <text>HANMINGZHE</text>
          <div class="user_top_time">
            <text>有效期至1：</text>
            <text>2019-03-09</text>
          </div>
        </li>
        <li class="user_top_li user_top_right">
          <a class="user_top_btn">
            <text class="user_top_btnText">个人信息</text>
          </a>
        </li>
      </ul>
      </div>
      <div class="user_reward">
        <ul class="user_rewardShow">
          <li class="user_reward_li user_reward_li_border">
            <text>可提现奖励</text>
            <text class="user_reward_number">0.00</text>
          </li>
          <li class="user_reward_li user_reward_li_border">
            <text>累计奖励</text>
            <text class="user_reward_number">100.00</text>
          </li>
          <li class="user_reward_li">
            <text>今日奖励</text>
            <text class="user_reward_number">100000.00</text>
          </li>
        </ul>
        <div class="user_rewardBtn"><text class="user_rewardBtn_text">全部提现</text></div>
      </div>
      <div>
      <ul class="user_month">
        <li class="mouth_this user_month_li">
          <a class="mouth_this_a">
            <div class="mouth_thisLeft">
              <text class="mouth_text">本月奖励</text>
            </div>
            <div class="mouth_thisRight">
              <text class="mouth_text mouth_thisMoney">20000.00</text>
              <text class="mouth_text mouth_thisUnit">元</text>
            </div>
          </a>
        </li>
        <li class="mouth_all user_month_li">
          <a class="mouth_all_a" href="http://dotwe.org/raw/dist/a5e3760925ac3b9d68a3aa0cc0298857.bundle.wx">
            <div class="mouth_allLeft">
              <text class="mouth_text">每月奖励金额</text>
            </div>
            <div class="mouth_allRight">
              <text class="user_mouth_icon">&#xe603;</text>
            </div>
          </a>
        </li>
        <li class="mouth_withdraw user_month_li">
          <a class="mouth_withdraw_a" href="javascript:;">
            <div class="mouth_withdrawLeft">
              <text class="mouth_text">提现记录</text>
            </div>
            <div class="mouth_withdrawRight">
              <text class="user_mouth_icon">&#xe603;</text>
            </div>
          </a>
        </li>
      </ul>
      <ul class="user_bottom">
        <li class="user_bottom_li">
          <a href="javascript:;" class="user_bottom_a">
            <div class="user_bottom_left">
              <text class="user_bottom_icon user_bottom_iconLeft">&#xe62c;</text>
              <text class="user_bottom_text user_bottom_textLeft">我的好友</text>
            </div>
            <div class="user_bottom_right">
              <text class="user_bottom_text user_bottom_textRight">0</text>
              <text class="user_bottom_text user_bottom_textRight">个好友</text>
              <text class="user_bottom_icon user_bottom_iconRight">&#xe603;</text>
            </div>
          </a>
        </li>
        <li class="user_bottom_li">
          <a href="javascript:;" class="user_bottom_a">
            <div class="user_bottom_left">
              <text class="user_bottom_icon user_bottom_iconLeft">&#xe614;</text>
              <text class="user_bottom_text user_bottom_textLeft">奖励明细</text>
            </div>
            <div class="user_bottom_right">
              <text class="user_bottom_text user_bottom_textRight">总</text>
              <text class="user_bottom_text user_bottom_textRight">0</text>
              <text class="user_bottom_text user_bottom_textRight">次奖励</text>
              <text class="user_bottom_icon user_bottom_iconRight">&#xe603;</text>
            </div>
          </a>
        </li>
        <li class="user_bottom_li">
          <a href="javascript:;" class="user_bottom_a">
            <div class="user_bottom_left">
              <text class="user_bottom_icon user_bottom_iconLeft">&#xe65a;</text>
              <text class="user_bottom_text user_bottom_textLeft">我的二维码</text>
            </div>
            <div class="user_bottom_right">
              <text class="user_bottom_text user_bottom_textRight">分享二维码</text>
              <text class="user_bottom_icon user_bottom_iconRight">&#xe603;</text>
            </div>
          </a>
        </li>
        <li class="user_bottom_li">
          <a href="javascript:;" class="user_bottom_a">
            <div class="user_bottom_left">
              <text class="user_bottom_icon user_bottom_iconLeft">&#xe62a;</text>
              <text class="user_bottom_text user_bottom_textLeft">来自陈安之老师的祝福</text>
            </div>
            <div class="user_bottom_right">
              <text class="user_bottom_icon user_bottom_iconRight">&#xe603;</text>
            </div>
          </a>
        </li>
        <li class="user_bottom_li">
          <a href="javascript:;" class="user_bottom_a">
            <div class="user_bottom_left">
              <text class="user_bottom_icon user_bottom_iconLeft">&#xe60d;</text>
              <text class="user_bottom_text user_bottom_textLeft">【分享大使】约定</text>
            </div>
            <div class="user_bottom_right">
              <text class="user_bottom_icon user_bottom_iconRight">&#xe603;</text>
            </div>
          </a>
        </li>
      </ul>
      </div>
      <div class="user_qrcode">
        <image class="user_qrcode_img" src="../src/assets/img/qrcode.jpg" ></image>
        <text class="user_qrcode_text">关注二维码</text>
        <text class="user_qrcode_text">看更多《成功密码》</text>
      </div>
    </scroller>
  </div>
</template>

<script>
  import HelloWorld from './components/HelloWorld'
  import user_top from './components/user_top'
  import user_reward from './components/user_reward'
  import user_month from './components/user_month'
  export default {
    name: 'App',
    components: {
      HelloWorld,
      user_top,
      user_reward,
      user_month,
    },
    data () {
      return {
        logo: 'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png',
      }
    }
  }
</script>

<style scoped>
  .wrapper {justify-content: center;align-items: center;background-color: #E5E5E6;}
  .scroller {width: 750px;/*border-width:1px;border-style: solid;border-color: red;*/  }
  .logo {width: 424px;height: 200px;}
  .greeting {text-align: center;margin-top: 70px;font-size: 50px;color: #41B883;color:red;}
  .message {margin: 30px;font-size: 32px;color: red;text-align: center;}
  /*user_top 个人页面 个人信息部分*/
  .user_top{flex-direction: row;align-items: center;justify-content: space-between;border-bottom-width:1px;border-bottom-style: solid;border-bottom-color: #B4B4B5;width: 750px;padding-top: 40px;padding-bottom: 40px;background-color: #F8F8F8;}
  .user_top_left{padding-left: 25px;}
  .user_top_right{padding-right: 25px;}
  .user_top_img{width: 120px;height: 120px;border-radius: 60px;}
  .user_top_time{flex-direction: row;align-items: center;justify-content: flex-start;}
  .user_top_btn{background-color: #DC7009;width: 140px;height: 55px;border-radius: 5px;flex-direction: row;align-items: center;justify-content: center;}
  .user_top_btnText{color: #ffffff;}
  /*user_reward 个人页面 奖励显示部分*/
  .user_reward{width:750px;border-bottom-width:1px;border-bottom-style: solid;border-bottom-color: #B4B4B5;margin-top: 20px;padding-top: 30px;padding-bottom: 40px;background-color: #F8F8F8;}
  .user_rewardShow{width:750px;flex-direction: row;align-items: center;justify-content: center;}
  .user_reward_li{flex: 1;flex-direction: column;align-items: center;justify-content: center;}
  .user_reward_li_border{border-right-style:solid;border-right-width:1px;border-right-color:#9E9F9F;}
  .user_reward_number{color: #DC7009;}
  .user_rewardBtn{border-width:1px;border-style: solid;border-color: #7D7D7D;width: 300px;height: 80px;margin-left: 225px;flex-direction: column;align-items: center;justify-content: center;margin-top: 50px;border-radius: 5px;}
  .user_rewardBtn_text{text-align: center;}
  /*user_month 个人页面 奖励、记录部分*/
  .user_month{width:750px;background-color: #F8F8F8;margin-top: 20px;}
  .user_month_li{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#9E9F9F;width:750px;}
  .mouth_text{color: #7D7D7D;}
  .mouth_this_a{width:700px;margin:0 25px;flex-direction: row;height:120px;align-items: center;justify-content: space-between;}
  .mouth_thisLeft{flex: 1;flex-direction: column;}
  .mouth_thisRight{flex: 1;justify-content: flex-end;align-items: center;flex-direction: row;}
  .mouth_thisMoney{color: #DC7009;font-size: 40px;font-weight: bold;margin-right: 5px;}
  .mouth_thisUnit{color: #DC7009;font-size: 25px;}
  .mouth_all_a{width:700px;margin:0 25px;flex-direction: row;height:120px;align-items: center;justify-content: space-between;}
  .mouth_allLeft{flex: 1;}
  .mouth_allRight{flex: 1;align-items: flex-end;}
  .mouth_withdraw_a{width:700px;margin:0 25px;height:120px;flex-direction: row;align-items: center;justify-content: space-between;}
  .mouth_withdrawLeft{flex: 1;}
  .mouth_withdrawRight{flex: 1;align-items: flex-end;}

  .user_mouth_icon{font-family: iconfont;color: #7D7D7D;font-size: 50px;font-weight: bold;margin-left: 10px;}
  /*user_bottom 个人页面 主体部分*/
  .user_bottom{width:750px;background-color: #F8F8F8;margin-top: 20px;}
  .user_bottom_li{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:#9E9F9F;}
  .user_bottom_a{width:700px;margin:0 25px;flex-direction: row;height:120px;align-items: center;justify-content: space-between;}
  .user_bottom_left{flex: 1;flex-direction: row;align-items: center;justify-content: flex-start;}
  .user_bottom_right{flex: 1;flex-direction: row;align-items: center;justify-content: flex-end;}
  .user_bottom_iconLeft{margin-right: 15px;}

  .user_bottom_text{color: #7D7D7D;}
  .user_bottom_textLeft{font-size: 35px;}
  .user_bottom_textRight{font-size: 30px;}

  .user_bottom_icon{font-family: iconfont;color: #7D7D7D;}
  .user_bottom_iconLeft{font-size: 45px;}
  .user_bottom_iconRight{font-size: 50px;font-weight: bold;margin-left: 10px;}
  /**/
  .user_qrcode{width:750px;padding: 50px 0;background-color: #F8F8F8;}
  .user_qrcode_img{width: 240px;height: 240px;border-width:1px;border-style: solid;border-color: rgb(0,0,0);margin-left: 255px;margin-bottom: 15px;}
  .user_qrcode_text{text-align: center;color:#7D7D7D;}
</style>
<script>
  module.exports = {
    beforeCreate: function () {
      var domModule = weex.requireModule("dom");
      domModule.addRule('fontFace', {
        'fontFamily': "iconfont",
        'src': "url('http://at.alicdn.com/t/font_475407_agvgdhxied0zr529.ttf')"
      });
    }
  }
  const modal = weex.requireModule('modal')
  export default {
    methods: {
      onclick (event) {
        console.log('onclick:', event)
        modal.alert({
          message:'click this !',
          duration: 2.0
        }),function(value){
          console.log('prompt callback',value);
        }
      },
      onlongpress (event) {
        console.log('onlongpress:', event)
        modal.toast({
          message: 'onlongpress',
          duration: 0.8
        })
      },
      onappear (event) {
        console.log('onappear:', event)
        modal.toast({
          message: 'onappear 二维码',
          duration: 0.8
        })
      },
      ondisappear (event) {
        console.log('ondisappear:', event)
        modal.toast({
          message: 'ondisappear',
          duration: 0.8
        })
      }
    }
  }
</script>
